<template>
<div class="container">
	<headers :title="title" :refresh="isRefresh" :path="path"></headers>
	<div class="content">
		<div class="list-block no-margin">
			<ul>
				<li>
					<div class="item-content">
						<div class="item-media"><i class="icon icon-form-mobile"></i></div>
						<div class="item-inner no-padding-left">
							<div class="item-title label">手机号</div>
							<div class="item-input">
								<input type="tel">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-media"><i class="icon icon-form-verify"></i></div>
						<div class="item-inner no-padding-left no-padding-right">
							<div class="item-title label">验证码</div>
							<div class="item-input input-verify">
								<input type="text">
							</div>
							<div class="item-input input-verify-btn">
								<a href="javascript:;" class="color-danger">获取验证码</a>
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-media"><i class="icon icon-form-good"></i></div>
						<div class="item-inner no-padding-left">
							<div class="item-title label">推荐码</div>
							<div class="item-input">
								<input type="text">
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="content-block mar-top-20">
			<p>
				<a class="button button-fill button-big button-danger">
					注册
				</a>
			</p>
		</div>
	</div>
</div>
</template>

<script>
import $ from 'zepto'
import Headers from '../components/Headers'

export default {
  ready () {
    $.init()
  },
  data () {
    return {
      title: '注册',
      path: '/home',
      isRefresh: false
    }
  },
  components: {
    Headers
  }
}
</script>
<style scoped>
.icon.icon-form-mobile {
	width: 21px;
	height: 21px;
	background-image: url("../assets/images/public/icon-form-mobile.png");
}
.icon.icon-form-verify {
	width: 21px;
	height: 21px;
	background-image: url("../assets/images/public/icon-form-verify.png");
}
.icon.icon-form-good {
	width: 21px;
	height: 21px;
	background-image: url("../assets/images/public/icon-form-good.png");
}
.item-content{
	padding-left:15px!important;
}
.item-title{
	text-indent:10px;
}
.list-block .item-title.label{
	width:20%!important;
}
.input-verify-btn{
	width:180px!important;
	border-left:1px solid #ccc;
	text-align:center;
}
</style>